<template>
	<div class="contain">
		<el-container style=" border: 1px solid #eee">
			<!-- 头部菜单	Start -->
			<el-header style="text-align: right; font-size: 12px">
				<el-dropdown>
					<i class="el-icon-setting" style="margin-right: 15px"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>查看</el-dropdown-item>
						<el-dropdown-item>新增</el-dropdown-item>
						<el-dropdown-item>
							<a href="javascript:;" @click="this.logOut">登出</a>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span>王小虎</span>
			</el-header>
			<!-- 头部菜单 END -->
			<el-container>
				<!-- 左侧菜单 Start -->
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>导航一</template>
							<el-menu-item-group title="分组1">
								<el-menu-item index="1-1">
									<router-link to="/admin">管理员</router-link>
								</el-menu-item>
								<el-menu-item index="1-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="1-3">
									<router-link to="/article">文章</router-link>
								</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="1-4">
								<template slot="title">选项4</template>
								<el-menu-item index="1-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title"><i class="el-icon-menu"></i>导航二</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<el-menu-item index="2-1">选项1</el-menu-item>
								<el-menu-item index="2-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="2-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="2-4">
								<template slot="title">选项4</template>
								<el-menu-item index="2-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title"><i class="el-icon-setting"></i>导航三</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<el-menu-item index="3-1">选项1</el-menu-item>
								<el-menu-item index="3-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="3-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="3-4">
								<template slot="title">选项4</template>
								<el-menu-item index="3-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 左侧菜单END -->
				<!-- 内容区域 Start -->
				<el-main>
					<!-- <router-view v-bind:articleInfo='article'></router-view> -->
					<router-view></router-view>
				</el-main>
				<!-- 内容区域END -->
			</el-container>
		</el-container>

	</div>
</template>

<script>
	export default {
		name: 'Home',
		methods: {
			logOut() {
				this.$router.push('/login');
			}
		},
		data() {
			return {
				article:'articleInfo',
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.contain {
		height: 100%;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}

	a {
		text-decoration: none;
		color: #303133;
	}
</style>
